<template>
  <div>
    <el-scrollbar>
      <el-form ref="ruleForm">
        <el-form-item label>
          <div class="divClass">
            <div v-for="item in permissionsArr" :key="item.id" class="oneClass">
              <div class="onecheckbox">
                <el-checkbox
                  @change="handleChecked1(item)"
                  v-model="item.isCheck"
                  :label="item.name"
                  name="type"
                  :value="item.id"
                ></el-checkbox>
              </div>
              <div class="oneBox">
                <div
                  v-for="itemtow in item.nextMenus"
                  :key="itemtow.id"
                  class="twoClass"
                >
                  <div class="twocheckbox">
                    <el-checkbox
                      @change="handleChecked2(itemtow, item)"
                      v-model="itemtow.isCheck"
                      :label="itemtow.name"
                      name="type"
                      :value="itemtow.id"
                    ></el-checkbox>
                  </div>
                  <div>
                    <div
                      v-for="itemtre in itemtow.nextMenus"
                      :key="itemtre.id"
                      class="threecheckbox"
                    >
                      <div>
                        <el-checkbox
                          @change="handleChecked3(itemtre, itemtow, item)"
                          v-model="itemtre.isCheck"
                          :label="itemtre.name"
                          name="type"
                          :value="itemtre.id"
                        ></el-checkbox>
                      </div>
                      <div class="fourbox">
                        <div
                          v-for="itemfour in itemtre.nextMenus"
                          :key="itemfour.id"
                          class="fourcheckbox"
                        >
                          <el-checkbox
                            @change="
                              handleChecked4(itemfour, itemtre, itemtow, item)
                            "
                            v-model="itemfour.isCheck"
                            :label="itemfour.name"
                            name="type"
                            :value="itemfour.id"
                          ></el-checkbox>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="btnClass">
          <el-button class="btn-light-blue" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script type="text/ecmascript-6">
import { getRoleMenus, saveRoleMenus } from "@/api/system";

export default {
  props: {
    addEditId: {
      type: String,
      default: "",
    },
    addEditStatus: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 表单字段
      ruleForm: {},
      // 查看状态，禁止修改
      seeType: false,
      // 表单规则
      rules: {},
      permissionsArr: [], // 权限集合
    };
  },
  created() {
    // 查询角色权限
    this.getRoleMenus();
  },
  methods: {
    // 查询角色权限
    getRoleMenus() {
      getRoleMenus({ id: this.addEditId }).then((res) => {
        if (res.code == 200) {
          this.permissionsArr = res.data;
          this.permissionsArr.forEach((one) => {
            one.isCheck = one.isCheck == 1;
            if (one.nextMenus != undefined) {
              one.nextMenus.forEach((two) => {
                two.isCheck = two.isCheck == 1;
                if (two.nextMenus != undefined) {
                  two.nextMenus.forEach((three) => {
                    three.isCheck = three.isCheck == 1;
                    if (three.nextMenus != undefined) {
                      three.nextMenus.forEach((four) => {
                        four.isCheck = four.isCheck == 1;
                      });
                    }
                  });
                }
              });
            }
          });
        }
      });
    },
    // 选中事件1
    handleChecked1(item) {
      for (let i of item.nextMenus) {
        i.isCheck = item.isCheck;
        for (let j of i.nextMenus) {
          j.isCheck = item.isCheck;
          for (let k of j.nextMenus) {
            k.isCheck = item.isCheck;
          }
        }
      }
    },
    // 选中事件2
    handleChecked2(item, previtem) {
      previtem.isCheck = true;
      for (let i of item.nextMenus) {
        i.isCheck = item.isCheck;
        for (let j of i.nextMenus) {
          j.isCheck = item.isCheck;
          for (let k of j.nextMenus) {
            k.isCheck = item.isCheck;
          }
        }
      }
    },
    // 选中事件3
    handleChecked3(item, previtem, itemtre) {
      itemtre.isCheck = true;
      previtem.isCheck = true;
      for (let i of item.nextMenus) {
        i.isCheck = item.isCheck;
        for (let j of i.nextMenus) {
          j.isCheck = item.isCheck;
          for (let k of j.nextMenus) {
            k.isCheck = item.isCheck;
          }
        }
      }
    },
    // 选中事件4
    handleChecked4(item, previtem, itemtre, itemfour) {
      itemtre.isCheck = true;
      previtem.isCheck = true;
      itemfour.isCheck = true;
    },
    // 提交
    submitForm() {
      let permissionsArr = this.permissionsArr;
      let arr = [];
      for (let i of permissionsArr) {
        if (i.isCheck == true) {
          arr.push(i.id);
        }
        for (let item of i.nextMenus) {
          if (item.isCheck == true) {
            arr.push(item.id);
          }
          for (let j of item.nextMenus) {
            if (j.isCheck == true) {
              arr.push(j.id);
            }
            for (let k of j.nextMenus) {
              if (k.isCheck == true) {
                arr.push(k.id);
              }
            }
          }
        }
      }
      saveRoleMenus({ roleId: this.addEditId, menuIds: arr }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
        }
        // 执行完毕关闭窗口
        this.$emit("closeAddEdit", this.ruleForm);
      });
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      // 执行完毕关闭窗口
      this.$emit("closeAddEdit", this.ruleForm);
    },
  },
};
</script>

<style lang="less" scoped>
.permissions {
  overflow-y: scroll;
  height: calc(100vh - (190px));
}
.divClass {
  position: relative;
  /*可视区高度 减去 头部高度和底部padding*/
  height: calc(100vh - 300px);
}
.btnClass {
  position: fixed;
  margin-left: 120px;
}
.oneClass {
  display: flex;
  align-items: center;
  border-bottom: solid 1px #eeeeee;
  padding: 20px 0 20px 50px;
  .onecheckbox,
  .twocheckbox {
    width: 200px;
  }
  .threecheckbox {
    display: flex;
  }
  .fourbox {
    display: flex;
    align-items: center;
    padding: 0 0 20px 100px;
  }
  .fourcheckbox {
    margin-right: 20px;
  }
}
.btnPermissions {
  padding: 30px 150px;
  .btn {
    margin-left: 50px;
  }
}
.twoClass {
  display: flex;
  align-items: center;
}
.main {
  background: #f2f2f2;
  .main-breadcrumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 68px;
    padding: 0 25px;
    border-bottom: 1px solid #ececec;
    background: #fff;
    .main-breadcrumb-wrap {
      font-size: 16px;
      line-height: 68px;
      .main-breadcrumb-home {
        cursor: pointer;
        color: #999999;
      }
      .main-breadcrumb-sp {
        color: #5e687a;
      }
    }
  }
  .main-form {
    width: 100%;
    min-height: 80px;
    padding: 0 25px 5px 25px;
    overflow: hidden;
    background: #fff;
    .demo-form-inline {
      margin-top: 24px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
  }
  .main-table {
    width: 100%;
    padding: 0 25px;
    padding-top: 20px;
    overflow: hidden;
    margin-top: 10px;
    background: #fff;
    .table-wrap {
      height: calc(100vh - (306px));
    }
  }
  .main-dialog {
    height: calc(100vh - 251px);
    background: #fff;
  }

  /deep/.el-form-item__label {
    line-height: 32px;
  }
  /deep/.el-form-item__content {
    line-height: 32px;
    .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
  }
  /*分页*/
  .el-pagination {
    float: right;
    margin-top: 25px;
  }
  /deep/.el-pagination.is-background {
    .number,
    .btn-prev,
    .btn-next {
      background-color: #fff;
      border: 1px solid #ebedf0;
    }
    .el-pager li {
      background-color: #fff;
    }
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #499bfc;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #499bfc;
    color: #fff;
  }
}
</style>